<template>
  <div class="UploadImg">
    <Upload
      :before-upload="handleUpload"
      :action="uploadUrl"
      :data="data"
      name="upfile"
      :max-size="1024"
      :show-upload-list="false"
      :format="['jpg','jpeg','png']"
      :on-progress="handleProgress"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :on-success="handleSuccess">
      <div style="" class="picture">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <!--<Spin v-if="!fileInfo.status" fix style="width:50px;height:50px;top:4px;left:4px;">
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        </Spin>-->
        <Icon v-if="!imageUrl" type="ios-add" size="20"></Icon>
      </div>
    </Upload>

  </div>
</template>
<script>
  export default {
    props: ['index', 'showImg', 'disabled'],
    data () {
      return {
        imageUrl: this.showImg,
        loading: false,
        uploadUrl: `${this.$http.defaults.base}/file/upload/api`,
        data:{},
        fileInfo:[]

      }
    },
    watch: {
      showImg(newVal) {
        this.imageUrl = newVal
      }
    },
    created(){
      this.data = {
        token: sessionStorage.getItem('token'),
        jobId: (+new Date())
      }
    },
    methods: {
      handleProgress (event,file,fileList){
        console.log(event,file,fileList,'progress')
      },
      handleMaxSize (file) {
        console.log(file)
        // 请上传分辨率为678*382的图片，不可超过10M
        this.$Notice.warning({
          title: '超出文件大小范围',
          desc: '文件' + file.name + ' 太大了,请上传分辨率为684 × 348的图片,不允许超过 1M.'
        });
      },
      handleUpload (file) {
        return this.checkImageWH(file, 684, 348);
        // console.log(this.checkImageWH(file, 678, 382),'upload-file')
        //this.file = file;
        /*this.data = {
          token: localStorage.getItem('token'),
          jobId: this.getTimestamp(),
          upfile: file.name
        }*/
        return true;
      },
      handleFormatError (file) {//上传错误回调
        console.log(file,'err')
        this.$Notice.warning({
          title: '图片格式不正确',
          desc: '文件 ' + file.name + ' 图片格式不正确'
        });

      },
      handleSuccess (res, file) {
        console.log(res,'resdddddd')
        this.fileInfo = file;
        const imgUrl = res.data;
        this.$emit('handleSuccess', {
          imgUrl,
          index: this.index
        });
        this.$Message.success('上传成功')
      },
      /*change(file, fileList) {
        this.$emit('change', file, fileList)
      }*/

      checkImageWH(file, width, height) {
        let self = this;
        return new Promise(function (resolve, reject) {
          let filereader = new FileReader();
          filereader.onload = e => {
            let src = e.target.result;
            const image = new Image();
            image.onload = function () {
              if (width && this.width != width) {
                self.$Notice.error({
                  title: '请上传宽为684 × 348的图片',
                });
                reject();
              } else if (height && this.height != height) {
                self.$Notice.error({
                  title: '请上传高为684 × 348的图片',
                });
                reject();
              } else {
                resolve();
              }
            };
            image.onerror = reject;
            image.src = src;
          };
          filereader.readAsDataURL(file);
        });
      }

    },
    mounted(){
      console.log(this.$refs,'fileImage')
    }
  }
</script>
<style>
  .uploadimg{
    width: 58px;
    height: 58px;
    overflow: hidden;
  }
</style>
<style  lang="less">
  @size: 56px;
  .UploadImg{
    .picture{
      width: 58px;
      height:58px;
      line-height: 58px;
      text-align: center;
      border:1px dashed #eaeaea;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: @size;
      height: @size;
      line-height: @size;
      text-align: center;
    }
    .avatar, .avatar-uploader {
      width: @size;
      height: @size;
      display: block;
    }
  }

  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
</style>
